<template>
	<view class="container">
		<view class="header" :style="style">
			<view class="user-info">
				<image :src="userInfo.avatar" class="image"></image>
				<view class="user-desc">
					<view class="text">{{ userInfo.name }}</view>
					<view class="info" v-if="vipInfo">
						SVIP会员 {{ vipInfo.end_time }} 到期
					</view>
					<view class="info" v-else>
						快去开通SVIP享受更多优惠
					</view>
				</view>
			</view>
			
			<view class="save-info">已累积为您节省 ￥ <view class="amount">{{ totalSave }}</view></view>
		</view>
		<view class="card-content">
			<view class="card-content-head">
				<view class="line-box right">
					<view class="line"></view>
				</view>
				<view class="card-content-title">卡种选择</view>
				<view class="line-box left">
					<view class="line"></view>
				</view>
			</view>
			
			<view class="card-list">
				<scroll-view scroll-x="true" class="scroll-box">
					<view class="item-box" v-for="(item,index) in goodsList" :key="index" @click="chooseItem(item, index)" :class="{'on' : selectedIndex == index}">
						<image :src="item.icon" :style="'width:'+imgWidth+'rpx;'+'height:'+imgHeight+'rpx;margin-top:20rpx;'" mode=""></image>
						<view class="item-name">{{item.title}}</view>
						<view class="item-descr">￥<span style="font-size: 38rpx;">{{item.price}}</span></view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="card-content">
			<view class="card-content-head">
				<view class="line-box right">
					<view class="line"></view>
				</view>
				<view class="card-content-title">会员权益</view>
				<view class="line-box left">
					<view class="line"></view>
				</view>
			</view>
			
			<view class="vip-rule-list">
				<view class="item" v-if="equityInfo.free_postage == 1">
					<image :src="domain + '/static/images/baoyou.png'" style="width: 64rpx;height: 64rpx;"></image>
					<view class="rule-title">全场包邮</view>
					<view class="rule-txt">享受商品包邮服务</view>
				</view>
				<view class="item">
					<image :src="domain + '/static/images/discount.png'" style="width: 64rpx;height: 64rpx;"></image>
					<view class="rule-title">消费折扣</view>
					<view class="rule-txt">部分商品下单可享{{ equityInfo.discount.toString().replace(/\.?0+$/, "") }}折优惠</view>
				</view>
				<view class="item" v-if="equityInfo.integral > 0">
					<image :src="domain + '/static/images/integral.png'" style="width: 64rpx;height: 64rpx;"></image>
					<view class="rule-title">积分回馈</view>
					<view class="rule-txt">下单享{{ equityInfo.integral.toString().replace(/\.?0+$/, "") }}倍积分回馈</view>
				</view>
			</view>
		</view>
		<view class="action" v-if="!vipInfo">
			<view class="action-btn" @click="buy">
				<view class="title">立即开通 <span style="font-size: 24rpx;">￥</span> <span style="font-size: 30rpx;">{{ price }}</span></view>
			</view>
		</view>
		
		<uni-popup ref="popup" background-color="#fff">
			<view class="yt-list pay-title">
				<text class="cell-tit clamp pay-way-title">选择支付方式</text>
				<uni-icons type="closeempty" size="20" color="#909399" style="margin-right: 38rpx;" @click="cancelPay"></uni-icons>
			</view>
			<view class="yt-list" style="margin-top: 0;height: 320rpx;">
				<view class="yt-list-cell b-b" @click="changePayType('wechat_pay')" v-if="payWay.wechat_pay == 1">
					<uni-icons custom-prefix="iconfont" type="icon-weixinzhifu" size="25" color="#09bb07" class="icon-class"></uni-icons>
					<text class="cell-tit clamp" style="margin-left: 10px;">微信</text>
					<label class="radio">
						<radio value="" color="#e93323" :checked="nowPayWay == 'wechat_pay'"></radio>
					</label>
				</view>
				<view class="yt-list-cell b-b" v-if="canAlipay && payWay.alipay == 1" @click="changePayType('alipay')">
					<uni-icons custom-prefix="iconfont" type="icon-zhifubao" size="25" color="#00aaea" class="icon-class"></uni-icons>
					<text class="cell-tit clamp"style="margin-left: 10px;">支付宝</text>
					<label class="radio">
						<radio value="" color="#e93323" :checked="nowPayWay == 'alipay'"></radio>
					</label>
				</view>
				<view class="yt-list-cell b-b"@click="changePayType('balance')" v-if="payWay.balance_pay == 1">
					<uni-icons custom-prefix="iconfont" type="icon-jifen" size="25" color="#f90" class="icon-class"></uni-icons>
					<text class="cell-tit clamp" style="margin-left: 10px;">余额  <text style="color:#e93323;margin-left: 10px;font-size: 14px;">(可用：￥{{ userInfo.balance }})</text></text>
					<label class="radio">
						<radio value="" color="#e93323" :checked="nowPayWay == 'balance'"></radio>
					</label>
				</view>
			</view>
			<view class="money-title">支付 <view class="money-type">￥</view> <view class="amount">{{ price }}</view> </view>
			<view class="buy-btn" @click="submitOrder">立即支付</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		BASE_URL
	} from '@/config/app';
	import shopPay from '@/utils/shopPay.js'
	import {isWeixin} from '@/libs/index.js'
	
	export default {
		data() {
			return {
				domain: BASE_URL,
				imgWidth: 64,
				imgHeight: 64,
				selectedIndex: 0,
				canAlipay: false,
				style: "background-image: url('" + BASE_URL +  '/static/images/svip_bg.png' + "'); background-size: 100%; background-repeat: no-repeat;",
				//列表数据
				goodsList: [],
				// 试算数据
				trailData: {
					card_id: 0,
					pay_way: ''
				},
				orderInfo: {
					user_balance: 0
				},
				// 支付方式
				payWay: {
					wechat_pay: 1,
					alipay: 1,
					balance_pay: 1
				},
				userInfo: {}, // 用户信息
				vipInfo: {}, // vip信息
				totalSave: 0, // 累计节省
				equityInfo: {
					free_postage: 1,
					discount: 100,
					integral: 0
				}, // 权益信息
				price: "", // 下单金额
				nowPayWay: "",
				isWechatMp: false, // 是否公众号
			}
		},
		onShow() {
			if (isWeixin()) {
				this.isWechatMp = true
			}
		},
		onLoad() {
			//#ifdef H5
				this.canAlipay = true
			//#endif
			//#ifdef APP-VUE
				this.canAlipay = true	
			//#endif
		},
		mounted() {
			this.getBaseInfo()
		},
		methods: {
			chooseItem(item, index) {
				this.trailData.card_id = item.id
				this.selectedIndex = index
				
				// 可以购买才计算价格
				if (!this.vipInfo) {
					this.trail()
				}
			},
			// 购买
			buy() {
				this.$refs.popup.open('bottom')
			},
			// 取消支付
			cancelPay() {
				this.$refs.popup.close()
			},
			changePayType(type) {
				this.trailData.pay_way = type
				this.nowPayWay = type
			},
			// 获取基础信息
			async getBaseInfo() {
				let res = await this.$api.vip.getBaseInfo.get()
				this.userInfo = res.data.userInfo
				this.vipInfo = res.data.vipInfo
				this.totalSave = res.data.totalSave
				this.goodsList = res.data.cardList
				this.price = res.data.cardList[0].price
				this.equityInfo = res.data.equityInfo
				this.payWay = res.data.payWay.payWayMap
				this.nowPayWay = res.data.payWay.payWay
				this.trailData.pay_way = this.nowPayWay
				this.trailData.card_id = res.data.cardList[0].id
			},
			// 会员卡试算
			async trail() {
				let res = await this.$api.vip.trail.get(this.trailData)
				if (res.data) {
					this.equityInfo = {
						free_postage: res.data.free_postage,
						discount: res.data.discount,
						integral: res.data.integral
					}
					this.price = res.data.price
				} else {
					this.$tool.error('会员卡信息有误')
				}
			},
			// 创建订单
			async submitOrder() {
				
				uni.showLoading({
					title: '支付中...'
				})
						
				let res = await this.$api.vip.createOrder.post(this.trailData)
				uni.hideLoading()
				if (res.code == 0) {
					let data = res.data
					let self = this
					// 余额支付重置
					if (this.trailData.pay_way == 'balance') {
						data = res
					}
					// 执行支付
					shopPay.pay(this.trailData, this.isWechatMp, data, self, '/pages/vip/index')
				} else {
					this.$tool.error(res.msg, 3000);
				}
			}
		}
	}
</script>
<style>
	/deep/ ::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
		display: none;
	}
</style>
<style lang="scss">
	.uni-page-body {
		height: 100%;
	}
	.container {
		height: 100%;
		width: 100%;
		
		.header {
			height: 170px;
			padding: 45px 34px 0;
		}
		
		.card-content {
			background-color: #fff;
			border-radius: 5px;
			padding: 10px 15px 10px;
			margin: 10px 15px;
			
			.card-content-head {
				width: 100%;
				height: 52rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				
				.line-box {
				  display: flex;
				  justify-content: center;
				  align-items: center;
				  
				  .line {
					border: 2rpx solid #797979;
					width: 40px;  
				  }
				}
				
				.card-content-title {
					font-size: 28rpx;
					color: #303133;
					padding: 0 40rpx 0 40rpx;
					flex-shrink: 0;
					width: 194rpx;
				}
			}
			
			.right {
				justify-content: right !important;
			}
			
			.left {
				justify-content: left !important;
			}
		}
	}

	.subtitle {
		padding: 16rpx 32rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		line-height: 48rpx;
	}
	
	.scroll-box {
		display: flex;
		white-space: nowrap;
		width: 100%;
		min-height: 242rpx;
	}
	
	.item-box {
		display: inline-block;
		width: 218rpx;
		height: 240rpx;
		padding: 16rpx;
		border-radius: 12rpx;
		border: 4rpx solid #FFFFFF;
		margin: 16px 15px 15px 5px;
		box-shadow: 0 1px 15px rgba(0,0,0,.1);
		text-align: center;
		
		&.on {
			border: 1px solid #fcc282;
			background-color: #fef7ec;
		}
	}
	
	.item-name {
		display: table;
		width: 100%;
		font-size: 32rpx;
		line-height: 32rpx;
		white-space: pre-wrap;
		color: #754e19;
		margin-top: 8rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
		margin-top: 20rpx;
	}
	
	.item-descr {
		display: table;
		width: 100%;
		font-size: 24rpx;
		line-height: 30rpx;
		white-space: pre-wrap;
		color: #754e19;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
		margin-top: 30rpx;
	}
	
	.vip-rule-list {
		display: flex;
		
		.item {
			margin-top: 20rpx;
			width: 33%;
			height: 210rpx;
			display: flex;
			align-items: center;
			flex-direction: column;
			
			.rule-title {
				color: #303133;
				font-size: 26rpx;
				padding-top: 30rpx;
			}
			
			.rule-txt {
				color: #909399;
				font-size: 22rpx;
				padding: 0 20rpx;
				margin-top: 20rpx;
			}
		}
	}
	.action {
		position: fixed;
		z-index: 5;
		left: 0;
		bottom: 0;
		width: 100vw;
		height: 72px;
		background: #fff;
		box-shadow: 0 0 10px rgba(0,0,0,.1);
		text-align: right;
		line-height: 52px;
		background: #fff;
		padding: 0 20px;
		box-sizing: border-box;
		
		.action-btn {
			width: 100%;
			height: 41px;
			line-height: 41px;
			color: #7c5711;
			padding: 0 20px;
			display: inline-block;
			text-align: center;
			margin: 15px 0 0 0;
			border-radius: 5px;
			border: none;
			background-image: linear-gradient(0deg,#f7daa5,#e3b66b);
			box-sizing: border-box;
			
			.title {
				font-weight: 700;
			}
		}
	}
	
	.header {
		.user-info {
			display: flex;
			align-items: center;
			height: 110rpx;
			padding-left: 20rpx;
			padding-top: 20rpx;
			
			.user-desc {
				display: flex;
				flex-direction: column;
				padding-left: 20rpx;
			}
			
			image {
				width: 90rpx;
				height: 90rpx;
				border: 3px solid hsla(0,0%,96.1%,.3);
				border-radius: 50%;
			}
			
			.text {
				flex: 1;
				min-width: 0;
				margin-right: 14rpx;
				margin-left: 14rpx;
				font-size: 30rpx;
				font-weight: 700;
				color: #666;
				margin-bottom: 10rpx;
			}
			
			.info {
				display: flex;
				font-size: 22rpx;
				color: #666;
				
				.num {
					font-size: 30rpx;
					font-style: italic;
					margin-top: -10rpx;
					margin-left: 10rpx;
					margin-right: 10rpx;
				}
			}
		}
		
		.save-info {
			margin-top: 60rpx;
			font-size: 24rpx;
			color: #ae5a2a;
			display: flex;
			align-items: center;
			
			.amount {
				font-size: 36rpx;
				margin-top: -12rpx;
			}
		}
	}
	
	.yt-list {
		margin-top: 16upx;
		background: #fff;
	}
	
	.yt-list-cell {
		display: flex;
		align-items: center;
		padding: 10upx 30upx 10upx 40upx;
		line-height: 70upx;
		position: relative;
	
		&.cell-hover {
			background: #fafafa;
		}
	
		&.b-b:after {
			left: 30upx;
		}
	
		.cell-icon {
			height: 32upx;
			width: 32upx;
			font-size: 22upx;
			color: #fff;
			text-align: center;
			line-height: 32upx;
			background: #f85e52;
			border-radius: 4upx;
			margin-right: 12upx;
	
			&.hb {
				background: #ffaa0e;
			}
	
			&.lpk {
				background: #3ab54a;
			}
	
		}
	
		.cell-more {
			align-self: center;
			font-size: 24upx;
			color: $font-color-light;
			margin-left: 8upx;
			margin-right: -10upx;
		}
	
		.cell-tit {
			flex: 1;
			font-size: 26upx;
			color: $font-color-light;
			margin-right: 10upx;
		}
	
		.cell-tip {
			font-size: 26upx;
			color: $font-color-dark;
	
			&.disabled {
				color: $font-color-light;
			}
	
			&.active {
				color: $base-color;
			}
			&.red{
				color: $base-color;
			}
		}
	
		&.desc-cell {
			.cell-tit {
				max-width: 90upx;
			}
		}
	
		.desc {
			flex: 1;
			font-size: $font-base;
			color: $font-color-dark;
		}
	}
	uni-checkbox .uni-checkbox-input {
	    border-radius: 50%;
	    width: 19px;
	    height: 19px;
	}
	.pay-way-title {
	    font-size: 13px;
	    padding: 10px 0px 10px 20px;
	    color: #909399;
	}
	.pay-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	radio {transform:scale(0.8)}
	.buy-btn {
	    height: 34px;
	    line-height: 34px;
	    border-radius: 5px;
	    background: #e93323;
	    font-size: 15px;
	    color: #fff;
	    margin: 0 auto;
	    margin-top: 15px;
	    margin-bottom: 20px;
		text-align: center;
		width: 90%;
	}
	.money-title {
		display: flex;
		justify-content: center;
		font-size: 28rpx;
		align-items: center;
		
		.amount {
			color: #e93323;
			font-size: 40rpx;
			margin-top: -8rpx;
		}
		
		.money-type {
			color: #e93323;
		}
	}
</style>